<template>
  <div class="order-card">
    <el-card shadow="always">
      <!-- 店铺头像名称 -->
      <div class="store" @click="toOrderDetail(orderId)">
        <img :src="storeImg" height="40px" />
        <span>{{ storeName }} <i class="fa fa-angle-right" aria-hidden="true" />
        </span>
      </div>
      <el-divider style="margin: 6px 0;" />
      <!-- 订单商品概览 -->
      <el-row>
        <div v-for="(food, index) in foods" :key="index">
          <div class="food">
            <img :src="food.img" height="50px" /><br>
            {{ food.name }}
          </div>
        </div>
      </el-row>
      <br>
      <!-- 订单购买信息 -->
      <span class="order-time">
        下单时间 {{ orderTime }}
      </span>
      <div>
        <span style="font-size: 15px;">订单状态：
          <el-tag effect="plain">{{ stateDisc }}</el-tag>
        </span>
      </div>
      <div>
        <p style="text-align: right;margin-bottom: 5px;">
          合计 <span style="font-weight: bold;">¥ {{ cost }}</span>
        </p>
      </div>
      <!-- 订单操作 -->
      <el-row justify="end">
        <el-button round @click="ElMessage('来了吗？如来')">再来一单</el-button>
        <el-button round @click="ElMessage('评价')" v-if="state === 'toBeEvaluated'">评价</el-button>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
defineProps({
  orderId: String,
  storeImg: String,
  storeName: String,
  foods: Array,
  orderTime: String,
  stateDisc: String,
  state: String,
  cost: Number,
})
const router = useRouter();
const toOrderDetail = (orderId) => {
  router.push('/orderDetail/' + orderId);
}
</script>

<style scoped>
.order-card {
  width: 95%;
  margin: 10px;
}

.order-time {
  font-size: x-small;
}

.store span {
  margin-left: 2%;
  margin-right: 2%;
  position: relative;
  top: -12px;
  font-weight: bold;
  font-size: 15px;
}

.store p {
  text-align: right;
  font-weight: 100;
}

.food {
  font-size: x-small;
  font-weight: lighter;
  margin-left: 4px;
  margin-right: 4px;
}
</style>